<template>
  <div class='app-container'>
    <a-button type="primary" style="position: fixed; top: 85px; left: 215px; z-index: 10;" @click="createGraph">createGraph</a-button>
    <div class="top-func-wra">
      <a-button @click="save" style="height: 80%">
        <img :src="svgBtn.find(item => item.indexOf('ctrls') != -1)" alt="">
      </a-button>
      <a-button @click="copy" style="height: 45%">
        <img :src="svgBtn.find(item => item.indexOf('ctrlc') != -1)" alt="">
      </a-button>
      <a-button @click="ctrlv" style="height: 45%">
        <img :src="svgBtn.find(item => item.indexOf('ctrlv') != -1)" alt="">
      </a-button>
      <a-button @click="ctrlx" style="height: 45%">
        <img :src="svgBtn.find(item => item.indexOf('ctrlx') != -1)" alt="">
      </a-button>
      <a-button @click="group" style="height: 45%">
        <span>分组</span>
      </a-button>
      <a-button @click="ungroup" style="height: 45%">
        <span>分离</span>
      </a-button>
      <a-button @click="zTop" style="height: 45%">
        <img :src="svgBtn.find(item => item.indexOf('indextop') != -1)" alt="" style="height: 70%;margin-left: 5px;">
        <span>顶层</span>
      </a-button>
      <a-button @click="zBot" style="height: 45%">
        <img :src="svgBtn.find(item => item.indexOf('indexbot') != -1)" alt="" style="height: 70%;margin-left: 5px;">
        <span>底层</span>
      </a-button>
      <a-button @click="remove" style="height: 45%">
        <img :src="svgBtn.find(item => item.indexOf('remove') != -1)" alt="" style="height: 70%;margin-left: 5px;">
        <span>删除</span>
      </a-button>
      <a-button @click="zoomin" style="height: 45%">
        <img :src="svgBtn.find(item => item.indexOf('zoomin') != -1)" alt="" style="height: 70%;margin-left: 5px;">
        <span>放大</span>
      </a-button>
      <a-button @click="zoomout" style="height: 45%">
        <img :src="svgBtn.find(item => item.indexOf('zoomout') != -1)" alt="" style="height: 70%;margin-left: 5px;">
        <span>缩小</span>
      </a-button>
      <a-button @click="adaptWindow" style="height: 45%">
        <span>适应窗口</span>
      </a-button>
      <a-button @click="actualSize" style="height: 45%">
        <span>重置大小</span>
      </a-button>
      <a-button @click="rotation" style="height: 95%" disabled>
        <img :src="svgBtn.find(item => item.indexOf('rotation') != -1)" alt="" style="height: 70%;margin-left: 5px;">
        <br />
        <span>旋转90°</span>
      </a-button>
      <a-button @click="alignLeft" style="height: 45%">
        <span>垂直左对齐</span>
      </a-button>
      <a-button @click="alignRight" style="height: 45%">
        <span>垂直右对齐</span>
      </a-button>
      <a-button @click="alignCenter" style="height: 45%">
        <span>垂直中心对齐</span>
      </a-button>
      <a-button @click="alignMiddle" style="height: 45%">
        <span>水平中心对齐</span>
      </a-button>
      <a-button @click="alignTop" style="height: 45%">
        <span>水平上对齐</span>
      </a-button>
      <a-button @click="alignBot" style="height: 45%">
        <span>水平下对齐</span>
      </a-button>
      <a-button @click="collapse" style="height: 45%">
        <span>折叠</span>
      </a-button>
      <a-button @click="expand" style="height: 45%">
        <span>展开</span>
      </a-button>
      <a-button @click="selectAll" style="height: 45%">
        <span>全选</span>
      </a-button>
      <a-button @click="zoom" style="height: 45%">
        <span>变焦</span>
      </a-button>
      <a-button @click="exporttimage" style="height: 45%">
        <span>位图查看</span>
      </a-button>
      <a-button @click="print" style="height: 45%">
        <span>打印预览</span>
      </a-button>
      <a-button @click="refresh" style="height: 45%">
        <span>刷新</span>
      </a-button>
    </div>
    <!-- 主容器 -->
    <div ref="graphContainer" class="parent-wrapper" />
  </div>
</template>

<script>
import mxgraph from '@utils/init.js';
import keyDown from '@utils/initKeyHandler.js';

import svgBtn from '@/assets/iconBtn'

const path = require('path')

export default {
  name: '',
  module_index: 1000,
  module_default: true,
  module_name: '顶部功能区',
  data() {
    return {
      svgBtn,
      editor: null,
      graph: null,
      parent: null,
      num: 0,
    };
  },
  created() { },
  mounted() {
    this.init();
    this.createGraph();
    this.loadXml();
    console.log(svgBtn);
    console.log(this.editor.actions.group)
  },
  methods: {
    init() {
      this.editor = new mxEditor()
      // 创建全局容器
      this.graph = this.editor.graph;
      this.editor.setGraphContainer(this.$refs.graphContainer);
      // 创建全局父元素
      this.parent = this.graph.getDefaultParent();

      //   mxEvent.disableContextMenu(this.$refs.graphContainer);
      this.rubberBand = new mxRubberband(this.graph)
      keyDown(this.graph);
    },
    createGraph() {
      ++this.num;
      var v1 = this.graph.insertVertex(this.parent,'Hello','Hello',Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),80,30,'shape=Arrow Down;rotation=45');
      ++this.num;
      var v2 = this.graph.insertVertex(this.parent,'World','World',Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),80,30,'shape=shape=doubleEllipse;perimeter=ellipsePerimeter;');
      ++this.num;
      var v3 = this.graph.insertVertex(this.parent,'everyBody!','everyBody!',Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),60,60,'opacity=50');
      this.graph.insertEdge(v1,'v1-v2','',v1,v2);
      this.graph.insertEdge(v2,'v2-v3','',v2,v3,'edgeStyle=orthogonalEdgeStyle;');
      this.graph.insertEdge(v3,'v3-v1','',v3,v1);
    },
    // 保存
    save() {
      const encoder = new mxCodec()
      const result = encoder.encode(this.graph.getModel())

      // 返回一个相当漂亮的打印字符串，该字符串表示给定节点的XML树。此方法应该只用于打印XML以供读取，而使用getXml来获取用于处理的字符串。
      let str = mxUtils.getPrettyXml(result)
      console.log(str)
    },
    // 加载xml
    loadXml() {
      let file = path.join('./arrows.xml');     // 这里拼接了路径
      let req,root,shape;
      try {
        req = mxUtils.load(file)              // 同步同步加载指定的URL并返回mxXmlRequest。
        root = req.getDocumentElement()
        shape = root.firstChild;
      } catch (error) { }
      while (shape != null) {
        if (shape.nodeType === mxConstants.NODETYPE_ELEMENT) {
          const shapeName = shape.getAttribute('name')

          // mxStencilRegistry:添加给定的mxStencil。
          // mxStencil:基于XML节点作为描述的通用形状。
          mxStencilRegistry.addStencil(shapeName,new mxStencil(shape))
        }
        shape = shape.nextSibling;
      }
    },
    // 复制
    copy() {
      var cells = new Array();
      cells = this.graph.getSelectionCells();
      let tmp = mxClipboard.copy(this.graph,cells);
      console.log(tmp)
    },
    // 粘贴
    ctrlv() {
      mxClipboard.paste(this.graph);
    },
    // 剪切
    ctrlx() {
      var cells = new Array();
      cells = this.graph.getSelectionCells();
      mxClipboard.cut(this.graph,cells);
    },
    // 分组
    group() {
      this.editor.actions.group(this.editor)
    },
    // 取消分组
    ungroup() {
      this.editor.actions.ungroup(this.editor)
    },
    zTop() {
      this.editor.actions.toFront(this.editor)
    },
    zBot() {
      this.editor.actions.toBack(this.editor)
    },
    // 删除
    remove() {
      this.graph.removeCells(this.graph.getSelectionCells(),false);
    },
    // 放大
    zoomin() {
      this.graph.zoomIn()
    },
    // 缩小
    zoomout() {
      this.graph.zoomOut()
    },
    // 适应窗口
    adaptWindow() {
      this.editor.actions.fit(this.editor);
    },
    actualSize() {
      this.editor.actions.actualSize(this.editor);
    },
    // 旋转
    rotation() {
      // this.editor.actions.forEach(item => item(this.editor))
      this.editor.actions.alignCellsRight(this.editor)
      console.log(this.editor.actions)
      if (this.graph.getSelectionCells().length != 1) return;
      console.log('z')
    },
    alignRight() {
      this.editor.actions.alignCellsRight(this.editor)
    },
    alignLeft() {
      this.editor.actions.alignCellsLeft(this.editor)
    },
    alignCenter() {
      this.editor.actions.alignCellsCenter(this.editor)
    },
    alignTop() {
      this.editor.actions.alignCellsTop(this.editor)
    },
    alignBot() {
      this.editor.actions.alignCellsBottom(this.editor)
    },
    alignMiddle() {
      this.editor.actions.alignCellsMiddle(this.editor)
    },
    collapse() {
      this.editor.actions.collapse(this.editor)
    },
    expand() {
      this.editor.actions.expand(this.editor)
    },
    selectAll() {
      this.editor.actions.selectAll(this.editor)
    },
    zoom() {
      this.editor.actions.zoom(this.editor)
    },
    exporttimage() {
      this.editor.actions.exportImage(this.editor)
    },
    print() {
      this.editor.actions.print(this.editor)
    },
    refresh() {
      this.editor.actions.refresh(this.editor)
    },



  }
};
</script>

<style scoped>
.parent-wrapper {
  position: absolute;
  top: 70px;
  left: 200px;
  right: 0;
  height: calc(100% - 70px);
}
.top-func-wra {
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  height: 70px;
  background: #1a1a1a;
  writing-mode: vertical-lr;
}
.top-func-wra img {
  height: 100%;
}
.top-func-wra > .ant-btn {
  padding: 3px;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
}
</style>